@import '../../../style/theme/index';

@include theme {
  .theme-edit-panel {
    position:fixed;
    right: 20px;
    bottom: 20px;
    top: 80px;
    width: 300px;
    background-color: rgba(black, 0.45);
    border-radius: 4px;
    overflow: auto;

    &__head {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 20px 0;
      position: absolute;
      top:0;
      left:0;
      right:0;
      box-sizing: border-box;

      // 按钮字体大小
      span {
        font-size: 12px;
      }

      svg {
        font-size: 14px;
        margin-right: 4px;
      }

      & > div {
        background-color: rgba(black, .35);
        padding: 6px 9px;
        color: white;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color linear 200ms;

        &:first-child {
          padding-left: 16px;
          border-top-left-radius: 100px;
          border-bottom-left-radius: 100px;
        }
        &:last-child {
          padding-right: 16px;
          border-top-right-radius: 100px;
          border-bottom-right-radius: 100px;
        }
        // 按钮之间的 | 线
        &:not(:first-child) {
          &:before {
            top: 20%;
            bottom: 20%;
            content: '';
            position: absolute;
            left: 0;
            transform: translateX(-50%);
            width: 1px;
            background-color: rgba(white, .5);
          }
        }

        &:hover {
          background-color: white;
          color: $colorPrimary;
          cursor: pointer;

          &:active {
            background-color: #ddd;
          }
        }
      }
    }

    &__body {
      position: absolute;
      top: 50px;
      bottom: 0;
      left: 0;
      right: 0;

      &__content {
        //padding-bottom: 300px;

        &__group {
          &__title {
            color: white;
            font-size: 18px;
            padding: 0 20px;
            margin: 20px 0 10px 0;
          }
          &__title,&__item__title{
            & > span:first-child {
              margin-right: 8px;
            }
          }
          &__item {
            padding: 0 20px;

            &__title {
              color: rgba(white, 0.65);
              font-size: 14px;
              margin-bottom: 4px;

              //每个item对应的表单项
              & + div {
                margin-bottom: 16px;

                & > .pl-input {
                  background-color: transparent;
                  width: 100%;

                  input, .pl-input-inner {
                    border: none;
                    width: 100%;
                    background-color: rgba(black, 0.3);
                    color: white;
                  }

                  .pl-color-button {
                    background-color: white;
                  }

                  &.pl-number {
                    input {
                      background-color: transparent;
                    }

                    .pl-number-prepend-button, .pl-number-append-button {
                      background-color: rgba(black, 0.3);
                      border: none;
                      padding-top: 2px;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

  }
}
